<template>
    <div class="MyCourse">
        <div class="head">
        <TopBar class="t" :title="'全部课程'"  :url="'/find'"></TopBar>
        <router-link  class="yo-ico fangdajing" to="/search/index">&#xe65f;</router-link>
       </div>
        <ul ref="select">
            <span></span>
            <li>全部</li>
            <li>健身</li>
            <li>瑜伽</li>
            <li>跑步</li>
            <li>骑行</li>
            <i class="yo-ico" @click="filterHandler">&#xe65f;</i>
        </ul>
        <div class="course">
            <div class="container">
                <ol class="course-ul">
            <li class="course-li">
                <div class="course-li-div">
                    <div class="img"><img src="../../assets/img/find/mycourse_01.jpeg" alt=""></div>
                    <p>1879人正在学习</p>
                    <h3>HATA瑜伽基础教程</h3>
                    <h4>FREE·12分钟·FT2</h4>
                </div>
            </li>
               <li class="course-li">
                <div class="course-li-div">
                    <div class="img"><img src="../../assets/img/find/mycourse_02.jpeg" alt=""></div>
                    <p>1879人正在学习</p>
                    <h3>HATA瑜伽基础教程</h3>
                    <h4>FREE·12分钟·FT2</h4>
                </div>
            </li>
                  <li class="course-li">
                <div class="course-li-div">
                    <div class="img"><img src="../../assets/img/find/mycourse_03.jpeg" alt=""></div>
                    <p>1879人正在学习</p>
                    <h3>HATA瑜伽基础教程</h3>
                    <h4>FREE·12分钟·FT2</h4>
                </div>
            </li>
                  <li class="course-li">
                <div class="course-li-div">
                    <div class="img"><img src="../../assets/img/find/mycourse_04.jpeg" alt=""></div>
                    <p>1879人正在学习</p>
                    <h3>HATA瑜伽基础教程</h3>
                    <h4>FREE·12分钟·FT2</h4>
                </div>
            </li>
                <li class="course-li">
                <div class="course-li-div">
                    <div class="img"><img src="../../assets/img/find/mycourse_05.jpeg" alt=""></div>
                    <p>1879人正在学习</p>
                    <h3>HATA瑜伽基础教程</h3>
                    <h4>FREE·12分钟·FT2</h4>
                </div>
            </li>
                <li class="course-li">
                <div class="course-li-div">
                    <div class="img"><img src="../../assets/img/find/mycourse_06.jpeg" alt=""></div>
                    <p>1879人正在学习</p>
                    <h3>HATA瑜伽基础教程</h3>
                    <h4>FREE·12分钟·FT2</h4>
                </div>
            </li>
                <li class="course-li">
                <div class="course-li-div">
                    <div class="img"><img src="../../assets/img/find/mycourse_07.jpeg" alt=""></div>
                    <p>1879人正在学习</p>
                    <h3>HATA瑜伽基础教程</h3>
                    <h4>FREE·12分钟·FT2</h4>
                </div>
            </li>
                </ol>
        </div>
        </div>
        <div class="masking" @click="filterHandler" v-show="isShow"></div>
        <div class="filter" ref="filter" >
             <h1>筛选</h1>
             <p>价格区间</p>
             <div class="inputbox">
                 <input  placeholder="最低价" type="text">
                 <span>—</span>
                 <input placeholder="最高价" type="text">
             </div>
             <p>训练时常（分钟）</p>
             <div class="time-bar">
                <span>10</span> <van-slider bar-height="7px"  :min="10" :max="30" active-color="background linear-gradient(to right, #8b7cf4, #6c5deb)" v-model="value" range @change="onChange" /> <span>30</span>
             </div>
             <p>更新时间</p>
             <div class="spanbox" ref="spanlist">
                 <span>全部</span><span>三天内</span><span>一周内</span><span>一月内</span><span>半年内</span><span>一年内</span>
             </div>
             <p>难度</p>
             <div class="bnbox" ref="FTlist">
                 <span>FT1</span><span>FT2</span><span>FT3</span><span>FT4</span><span>FT5</span>
                <button @click="resetHandler">重置</button><button @click="filterHandler" >确定</button>
             </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
   import { Slider,Toast}from 'vant';
  import TopBar from "@/component/TopBar";
    Vue.use(Slider);
    export default {
        name: "AllCourse",
        data() {
            return {
                isShow:false,
                state:null,
                value: [15, 25],
            }
        },
        components:{
            TopBar
        },
        mounted() {
            let span=this.$refs.select.children[0]
            let lis=Array.from(this.$refs.select.children).slice(1).slice(0,5)
            lis.forEach(i=>i.addEventListener('click',clickHandler))
            function clickHandler(e) {
                let index=lis.indexOf(this)
                span.style.left=`${0.25+index*0.65}rem`
            }
            
            let spanList=Array.from(this.$refs.spanlist.children)
            spanList.forEach(i=>i.addEventListener('click',clickspanHanlder))
            
            function  clickspanHanlder(e){
                    spanList[0].style.color='#000'
                    spanList[0].style.backgroundColor='#f4f7f9'
                    spanList[0].style.border="none"  
                if(self.state){
                    self.state.style.color='#000'
                    self.state.style.backgroundColor='#f4f7f9'
                    self.state.style.border="none"                   
                }
                    self.state=this
                    self.state.style.backgroundColor='#fff'
                    self.state.style.border="1px solid #877eb8"
                    self.state.style.color="#877eb8"                            
            }
             let FTlist=Array.from(this.$refs.FTlist.children)
            FTlist.forEach(i=>i.addEventListener('click',FTlistHanlder))
            function  FTlistHanlder(e){
                this.style.backgroundColor='#fff'
                this.style.border="1px solid #877eb8"
                this.style.color="#877eb8"              
            }
           
        },
      methods:{
           onChange(value) {
              Toast('训练时长：' + value);  
             },
           filterHandler(){              
                this.isShow=!this.isShow
                console.log(0)
                if(this.isShow){
                    this.$refs.filter.style.right=0
                }else{
                    this.$refs.filter.style.right= "-92%"
                }
              
            },
           
            resetHandler(){

            }
        }
    }
</script>

<style lang='stylus' scoped>
@import "../../assets/stylus/border.styl"

    .head
        position relative
        margin-left: .16rem
        margin-top: .2rem           
        .fangdajing
            position absolute
            right .2rem
            top .01rem
            color #000
    ul 
        position: relative;
        margin: .06rem 0 0.15rem 0;
        display: flex;
        justify-content: space-around;
    

        li ,i
            color: #cccccc;
            font-size: 0.12rem;
    
        span 
            position: absolute;
            left: 0.3rem;
            bottom: -0.04rem;
            transition: all .5s;
            width: 0.1rem;
            height: 0.02rem;
            background-color: black;
    .course
        padding 0 .1rem
        height 6.3rem
        overflow-y:scroll
        .container
            overflow hidden
            height max-content
            .course-ul
                height max-content 
                width 100%
                .course-li 
                    width 100%
                    padding .05rem 0
                    .course-li-div
                        width 100%
                        position relative
                        .img 
                            width 100%
                            overflow hidden
                            border-radius .1rem
                            height 1.25rem
                            img 
                                width 100%  
                                margin-top -.6rem                           

                        p,h3,h4
                            color #fff
                            position absolute
                            font-size .1rem
                        p
                            top .1rem
                            left .1rem
                        h3  
                            top .6rem
                            left .1rem
                            font-size .13rem
                        h4  
                            bottom .1rem
                            left .1rem
                            font-weight 500
    .masking
        position absolute
        background-color #000
        opacity 0.4
        width 100%
        height 100%  
        top 0
        left 0  
    .filter
        width 90%
        height 100%
        background-color #fff
        position absolute
        top 0
        right -92% 
        transition: all .4s;
        h1
            font-size  .18rem
            color #3d3d40
            padding .2rem
            padding-bottom  .1rem
            background-color #f4f7f9
        p
            font-size .13rem
            color #393939          
            display block
            line-height .36rem
            padding-left .2rem
            border_1px(0 0 1px 0)
        .inputbox
            padding  .3rem 0 0 .6rem
            height .85rem
            font-size .12rem
            border_1px(0 0 1px 0)
            span 
                color #828587
                margin 0  .3rem
            input 
                outline-style none 
                border: 1px solid #ccc
                border-radius .05rem
                width 25%
                font-size .12rem
                height .3rem
                padding .1rem

        .time-bar
            display flex 
            align-content center 
            height 1rem
            border_1px(0 0 1px 0)
            padding .46rem .3rem
            span 
                color #838a8f
        .spanbox,.bnbox
            height 1.2rem
            padding .1rem
            span 
                width  1rem
                height .32rem
                line-height .32rem
                margin .08rem .05rem .1rem 0
                display inline-block
                border-radius 30px
                text-align center 
                vertical-align middle
                background-color #f4f7f9
                font-size .12rem
        .spanbox
            border_1px(0 0 1px 0)
            span:first-child
                background-color #fff
                border 1px solid #877eb8
                color #877eb8
               
        button
            position absolute
            bottom 0rem
            right  1.4rem
            background-color #ccc
            width 1rem
            height .32rem
            border-radius .3rem
            border-style none 
            color #fff
            font-size .14rem
            &:nth-of-type(2)
                right .17rem
                background linear-gradient(to right, #8b7cf4, #6c5deb)
                    
</style>